<template>
  <move-in>
    <div class="sub-view">
      <van-nav-bar
        :title="title"
        class="bar"
        left-arrow
        @click-left="back"
        v-if="title"
      >
        <template #right>
          <slot name="menu"></slot>
        </template>
      </van-nav-bar>
      <scroll class="scroll" :class="{ 'no-title': !title }">
        <slot></slot>
      </scroll>
    </div>
  </move-in>
</template>

<script>
import MoveIn from 'components/move-in/move-in'
import Scroll from 'components/scroll/scroll'

export default {
  name: 'sub-view',
  props: {
    title: {
      type: String,
      default: ''
    },
    back: {
      type: Function,
      default: () => {}
    }
  },
  components: {
    MoveIn,
    Scroll
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .sub-view
    position: fixed
    top: 0
    bottom: 0
    left: 0
    right: 0
    overflow: hidden
    background: #eee
    z-index: 10
    .bar
      position: absolute
      top: 0
      left: 0
      right: 0
    .scroll
      position: fixed
      top: 4.6rem
      bottom: 0
      left: 0
      right: 0
      overflow: hidden
      &.no-title
        top: 0
</style>
